<template>
    <div class="container">
        <div class="main">
            <div class="pay-title">
                支付总金额 <span class="pay-price">￥ {{payInfoData.price}}</span>
            </div>
            <div class="pay-main">
                <h4>微信支付</h4>
                <el-row type="flex" 
                justify="space-between" 
                align="middle"
                class="pay-qrcode">
                    <div class="qrcode">
                        <!-- 二维码 -->
                        <!-- canvas为画布标签 -->
                        <canvas id="qrcode-stage"></canvas>
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                    <div class="pay-example">
                        <img src="http://157.122.54.189:9093/images/wx-sweep2.jpg" alt="">
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
// 引入生成二维码的插件
 import QRCode from "qrcode";
export default {
    data () {
      return {
        // 用来存储订单信息
        payInfoData : {
          payInfo : {}
        },
        // 监视订单是否支付
        timer : ''
      }
    },
    mounted(){
      // 获取订单详情
      setTimeout(()=>{
         this.$axios({
           url : `/airorders/${this.$route.query.id}`,
            headers: {
                    Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
                }
         }).then(res =>{
              // console.log(res)
           this.payInfoData = res.data;
            const {code_url} = res.data.payInfo;
            const payCodeShow = document.querySelector('#qrcode-stage');
            // 将编码转换成付款二维码展示
            QRCode.toCanvas(payCodeShow, code_url, {
                    width: 200
                }); 
         })
        //  查询付款状态
            this.payCode();
      },200)
    },
    // 离开去到别的页面停止监视是否付款
     destroyed(){
        clearInterval(this.timer)
    },
    methods : {
      // 查询付款状态
      payCode(){
        this.timer =  setInterval(() => {
             this.$axios({
               url : '/airorders/checkpay',
               method :'post',
               data : {
                 id : this.$route.query.id,
                 nonce_str: this.payInfoData.payInfo.nonce_str,
                 out_trade_no : this.payInfoData.payInfo.order_no,
               },
                headers: {
                    Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
                }
             }).then(res =>{
              //  console.log(res)
              if(res.data.statusTxt !== '订单未支付'){
                   clearInterval(this.timer);
                    this.$alert('支付成功！感谢0.01巨款。', '温馨提示', {
                     confirmButtonText: '确定',
                       type :'success'
                     });
              }
             })
           }, 3000);
      }
    }
}
</script>

<style scoped lang="less">
.container{
    background:#f5f5f5;
    padding: 30px 0;

    .main{
        width:1000px;
        margin:0 auto;

        .pay-title{
            text-align: right;
            span{
                font-size:28px;
                color:orangered;
            }
        }

        .pay-main{
            background:#fff;
            margin-top:10px;
            border-top: 5px orange solid;
            padding:30px;

            h4{
                font-size: 28px;
                font-weight: normal;
                margin-bottom: 10px;
            }

            .pay-qrcode{
                padding:0 80px;
            }

            .qrcode{
                border:1px #ddd solid;
                padding:15px;
                height: fit-content;

                #qrcode-stage{
                    width:200px;
                    height:200px;
                    margin-bottom: 10px;
                }

                p{
                    line-height: 2;
                    text-align: center;
                }
            }
        }
    }
}
</style>